<template>
  <div class="app-container">

    <!-- 添加或修改车辆维修与保养对话框 -->
    <el-dialog title="维保完成" :visible="openBy" width="800px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-descriptions :column="2" border>
          <el-descriptions-item label-class-name="my-descriptions-label" label="车牌号" content-class-name="my-content">{{ form.carPlateNo|| '--' }}</el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="维保类型" content-class-name="my-content"> <dict-tag :options="dict.type.repair_type" :value="form.type"/></el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="送车时间" content-class-name="my-content">{{ form.repairStartDate|| '--' }}</el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="维修厂" content-class-name="my-content">{{ form.serviceName || '--'}}</el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="维保项目">{{ form.maintainRemark || '--'}}</el-descriptions-item>
        </el-descriptions>

        <br/>

        <el-descriptions :column="2" border>
          <el-descriptions-item label-class-name="my-descriptions-label" label="费用合计" content-class-name="my-content">
            <el-input v-model="form.totalPay" placeholder="请输入维保费用合计" @keyup.native="form.totalPay = oninput(form.totalPay,2)"/>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="付款方" content-class-name="my-content">
            <el-select v-model="form.payer" placeholder="请选择付款方" clearable size="small">
              <el-option v-for="item in dict.type.repair_maintain_payer" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label" label="当前里程" content-class-name="my-content">
            <el-input v-model="form.useMileage" placeholder="请输入当前里程" @keyup.native="form.useMileage = oninput(form.useMileage,4)"/>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="取车时间">
            <el-date-picker clearable size="small"
           v-model="form.repairEndDate"
           type="datetime"
           value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="选择取车时间">
          </el-date-picker>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label" label="维保附件" span="2">
            <imageUpload isArray v-model="form.imgList" ref="imageUpload" v-bind:limit="10"/>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" label="备注" span="2">
            <el-input v-model="form.remark" type="textarea" style="width: 500px"  maxlength="50"  show-word-limit placeholder="请输入内容" />
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {  updateRepairMaintain,getSupplierList,getRepairMaintain } from "@/api/car/repairMaintain";

export default {
  name: "RepairMaintain",
  dicts: ['repair_status', 'repair_type','repair_maintain_payer'],
  props: {
    carId: {
      type: String,
      default: ''
    },
    carPlateNo: {
      type: String,
      default: ''
    },
    useMileage: {
      type: Number,
      default: 0
    },

    openBy: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      supplierList:[],
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {
        },
      // 表单校验
      rules: {
        totalPay: [{
          required: true,
          message: '费用合计不能为空',
          trigger: 'blue'
        }],
        repairEndDate: [{
          required: true,
          message: '取车时间不能为空',
          trigger: 'blue'
        }],
        payer: [{
          required: true,
          message: '请选择付款方',
          trigger: 'blue'
        }],
      }
    };
  },
  created() {
    getRepairMaintain(this.carId).then(response => {
      this.form = response.data;
      this.form.useMileage = this.useMileage;
      this.form.payer =1
    });
    getSupplierList(2).then(response => {
      this.supplierList = response.data;
    });
  },
  methods: {
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("close")
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carId: null,
        carPlateNo: null,
        repairStatus: null,
        totalPay: null,
        repairStartDate: null,
        repairEndDate: null,
        type: 0,
        serviceId: null,
        serviceName: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
        imgList:[]
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          // this.form.totalPay = this.oninput(this.form.totalPay,2,99999999)
          this.loading = true;
          updateRepairMaintain(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.cancel()
          });
        }
      });
      setTimeout(()=> {
        this.loading = false;
      },2e3)
    }
  }
};
</script>
